ASYNC/AWAIT SYNTAX IN JAVASCRIPT

async/await is a modern way to write asynchronous code.

This note explains asynchronous functions in simple language.

You will learn:

1. what async/await is
2. what an asynchronous function is
3. how to declare async functions
4. why await is useful
5. why async/await is easier than many .then() calls
6. common beginner mistakes

1. What is async/await?

async/await is a modern way to write asynchronous code.

It helps asynchronous code look more like normal step-by-step code.

That is why many developers like it:

• it is cleaner
• it is easier to read
• it is easier to understand than long promise chains

Easy idea:

Promises are still used,
but async/await gives a cleaner syntax.

Diagram 1. Main idea of async/await

Asynchronous code
-> can be hard to read with many .then()
-> async/await makes it look simpler

async/await does not replace promises completely. It is a more convenient way to work with them.

2. What is an asynchronous function?

An asynchronous function is a function marked with the keyword async.

When a function has async, JavaScript treats it as a special function for asynchronous work.

The most important beginner rule is:

An async function allows the use of await.

Diagram 2. Async function idea

Normal function
-> cannot normally use await

Async function
-> can use await

So the keyword async gives the function special behavior.

3. Why async is needed

The main reason to use async is that it allows you to write await inside the function.

Easy memory rule:

async opens the door for await

Diagram 3. Relationship between async and await

async
-> makes function asynchronous
-> allows await inside it

4. Async function declaration

To declare an asynchronous function, put async before the function keyword.

Example

async function fetchData() {
  // ...
}

Diagram 4. Async function declaration

async function fetchData() {
  // ...
}

async
-> this function is asynchronous

This is the classic way to create an async function.

5. Async function expression

You can also make a function expression asynchronous.

Example

const fetchData = async function() {
  // ...
};

Diagram 5. Async function expression

const fetchData = async function() {
  // ...
};

The function is stored in a variable, but it is still asynchronous.

6. Async arrow function

Arrow functions can also be asynchronous.

Example

const fetchData = async () => {
  // ...
};

Diagram 6. Async arrow function

const fetchData = async () => {
  // ...
};

Here async is written before the parameter list.

This is very common in modern JavaScript.

7. Async object method

Object methods can also be asynchronous.

Example

const user = {
  async getUsername() {
    // ...
  },
};

Diagram 7. Async object method

object
-> method
-> async method

So not only standalone functions can be async. Methods inside objects can be async too.

8. Async class method

Class methods can also use async.

Example

class User {
  async getUsername() {
    // ...
  }
}

Diagram 8. Async class method

class
-> method
-> async method

This is useful in larger applications that use classes.

9. All main ways to declare async functions

Here are the main forms together.

Function declaration

async function fetchData() {
  // ...
}

Function expression

const fetchData = async function() {
  // ...
};

Arrow function

const fetchData = async () => {
  // ...
};

Object method

const user = {
  async getUsername() {
    // ...
  },
};

Class method

class User {
  async getUsername() {
    // ...
  }
}

Diagram 9. Full map of async function forms

Async functions
|
|- function declaration
|- function expression
|- arrow function
|- object method
`- class method

So async is flexible and can be used in many function forms.

10. Why await is useful

await makes asynchronous code easier to read.

Without await, code often looks like this:

fetchData()
  .then((result) => {
    return processData(result);
  })
  .then((finalResult) => {
    console.log(finalResult);
  })
  .catch((error) => {
    console.log(error);
  });

This works, but when there are many .then() calls, the code becomes harder to follow.

With await, the logic looks more like normal step-by-step code.

Diagram 10. Without await vs with await

Without await
-> .then()
-> .then()
-> .then()

With await
-> step 1
-> step 2
-> step 3

This is one of the biggest advantages of async/await.

11. Main advantage of async/await

The biggest advantage is readability.

It helps remove too many nested or chained .then() calls.

Easy summary:

async/await
-> cleaner code
-> easier to read
-> easier to understand

Diagram 11. Why developers use async/await

Promise-based code
-> can become long and messy

async/await
-> more natural and cleaner

12. Important rule to remember

Asynchronous functions are the place where await is used.

So if you see await, you should think:

This must be inside an async function.

Diagram 12. Important rule

Need await?
-> Use async function

This is one of the most important beginner rules.

13. Simple mental model

You can think about it like this:

Promise = future result
async = this function works with future results
await = wait for that result in a cleaner way

Diagram 13. Simple mental model

Promise
-> result comes later

async function
-> can work with that later result

await
-> lets code wait in a readable way

14. Common beginner mistakes

Mistake 1. Forgetting async

A beginner may want to use await, but forget to make the function async.

Wrong idea:

use await in a normal function

Correct idea:

use await inside an async function

Mistake 2. Thinking async/await is a separate system

It is not a completely different system. It still works with promises.

Mistake 3. Thinking only normal functions can be async

That is not true.

You can use async with:

• function declarations
• function expressions
• arrow functions
• object methods
• class methods

Diagram 14. Common mistakes summary

Need await?
-> remember async

async/await
-> still works with promises

async
-> can be used in many function forms

15. Easy memory rules

async = asynchronous function
await = wait for async result
async + await = cleaner promise code

16. Quick summary

• async/await is a convenient way to write asynchronous code.
• It makes asynchronous code look more like synchronous step-by-step code.
• Any function can become asynchronous if you add async.
• async can be used with function declarations, expressions, arrow functions, object methods, and class methods.
• Async functions allow the use of await.
• await helps make code cleaner by reducing the need for many .then() calls.

17. Final conclusion

If you understand these ideas:

async
await
asynchronous function
async declaration
async expression
async arrow function
async method

then you already have a strong foundation for understanding async/await syntax in JavaScript.